<template>
	<view class="dub">
		<view class="dub-list">
			<view class="dub-item" v-for="(item,index) in dubList" :key="index" @click="toDubDetail(item)">
				<view class="item-img">
					<image style="width: 100%;height: 100%;border-radius: 16rpx" :src="localIconSrc('dub.png')"></image>
				</view>
				<view class="item-text">
					<view class="text">{{ item.text }}</view>
					<view class="time">{{ item.insert_time }}</view>
				</view>
			</view>
		</view>
		<view v-show="dubList.length <= 0" class="nodata">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dubList: {
				type: Array
			}
		},
		data() {
			return {
				// dubList: []
			}
		},
		methods: {
			toDubDetail(item) {
				const data = JSON.stringify(item)
				console.log('data', data)
				uni.navigateTo({
					url: `/pages/ai-dub/detail-info/detail-info?item=${data}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dub {
		margin: 10rpx 32rpx;
		
		.dub-list {
			
			.dub-item {
				background: #fff;
				display: flex;
				align-items: center;
				padding: 20rpx;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
			}
			
			.item-img {
				width: 180rpx;
				height: 120rpx;
				// background: #999;
				// border-radius: 16rpx;
				margin-right: 40rpx;
			}
			
			.item-text {
				width: 440rpx;
			}
			
			.text {
				
				font-size: 28rpx;
				color: #666;
				margin-bottom: 20rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.time {
				font-size: 24rpx;
				color: #999;
			}
			
		}
		
	}
.nodata {
		width: 100%;
		margin-top: 100rpx;
	}
</style>
